<template>
  <div class="pie">
    <div class="pie__circle1" :style="circle1Style"></div>
    <div class="pie__circle2" :style="circle2Style"></div>
    <div class="pie__circle3" :style="circle3Style"></div>
    <canvas ref="el" :width="computedCanvasWidth" :height="computedCanvasHeight"></canvas>
    <div class="pie__desc">{{ desc }}</div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'Pie',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    circle1Radius: {
      type: [Number, String],
      default: 140
    },
    circle2Radius: {
      type: [Number, String],
      default: 150
    },
    circle3Radius: {
      type: [Number, String],
      default: 160
    },
    pieRadius: {
      type: String,
      default: '50%'
    },
    canvasWidth: {
      type: Number,
      default: 350
    },
    canvasHeight: {
      type: Number,
      default: 150
    },
    formatter: {
      type: [Function, String],
      // default: '{name|{b}} {value|{c} %}'
      // default: '{name|{c}}'
      default: function (a) { return a.name + ' ' + a.value + '(' + a.percent + '%)' }
    },
    desc: {
      type: String,
      default: ''
    },
    length: {
      type: Number,
      default: 8
    },
    length2: {
      type: Number,
      default: 4
    },
    color: {
      type: Array,
      default: () => ['#3BD5B3', '#A177FF', '#FA6D64', '#06A4FF', '#D5B13B']
    }
  },
  watch: {
    list () {
      this.initChart()
    }
  },
  data () {
    return {
    }
  },
  computed: {
    circle1Style () {
      return {
        width: this.$base * this.circle1Radius + 'px',
        height: this.$base * this.circle1Radius + 'px'
      }
    },
    circle2Style () {
      return {
        width: (this.$base * this.circle2Radius) + 'px',
        height: (this.$base * this.circle2Radius) + 'px'
      }
    },
    circle3Style () {
      return {
        width: (this.$base * this.circle3Radius) + 'px',
        height: (this.$base * this.circle3Radius) + 'px'
      }
    },
    computedCanvasWidth () {
      return this.canvasWidth * this.$base
    },
    computedCanvasHeight () {
      return this.canvasHeight * this.$base
    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      const option = {
        color: this.color,
        series: [
          {
            labelLine: {
              length: this.$base * this.length,
              length2: this.$base * this.length2,
            },
            radius: ['30%', '50%'],
            name: '面积模式',
            type: 'pie',
            center: ['50%', '60%'],
            // roseType: 'radius',
            itemStyle: {
              borderRadius: this.$base * 4,
              borderColor: '#fff',
              borderWidth: 0
            },
            label: {
              fontSize: this.$base * 14,
              color: '#fff',
              formatter: this.formatter,
              overflow: 'break',
              lineHeight: this.$base * 18
            },
            data: this.list,
          }
        ]
      }
      if (!this.instance) {
        this.instance = echarts.init(this.$refs.el)
      }
      this.instance.setOption(option)
    }
  }
}
</script>

<style lang="scss">
.pie {
  position: relative;
  padding-top: $base * 20px;

  canvas {
    position: relative;
  }

  .pie__circle1 {
    background: transparent;
    border-radius: 50%;
    border: $base * 2px solid #184380;
    left: 50%;
    top: 60%;
    position: absolute;
    transform: translate(-50%, -50%);
  }

  .pie__circle2 {
    background: transparent;
    border-radius: 50%;
    border: $base * 2px solid #145095;
    left: 50%;
    top: 60%;
    position: absolute;
    transform: translate(-50%, -50%);
  }

  .pie__circle3 {
    background: transparent;
    border-radius: 50%;
    border: $base * 2px solid #13539a;
    left: 50%;
    top: 60%;
    position: absolute;
    transform: translate(-50%, -50%);
  }

  .pie__desc {
    position: absolute;
    color: $txt_c4;
    font-size: $base * 14px;
    bottom: $base * 2px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>